<!-- 服务推广 -->
<template>
	<view class="page">
		<view class="box">
			
			<view class="group_4">
				<view>
					<view class="text-group_2">
						分红明细 ({{userList.length || 0}}人)
					</view>
				</view>
				<scroll-view scroll-y="true" :style="{ 'height': '83vh' }">
					<view v-if="userList.length">
						<view class="block_2" v-for="item in userList" :key="item.ID">
							<view class="person_cell">
								<image :src="item.HeadImgUrl" class="label_wh" mode="aspectFill"></image>
								<view class="person_info">
									<view class="image-text_2">
										<view class="name_box">
											<view class="text-group_3">
												{{ $util.entitiesToUtf16(item.Name) }}
											</view>
											<view class="Tag" v-if="item.SaleLevel">
												{{ item.SaleLevel }}
											</view>
										</view>
									</view>
									<view class="time">{{getTime2(item.CreateTime)}}</view>
								</view>
							</view>
							
							<view class="pay_cell">
								<view class="pay_text">
									+{{item.Commission}}
								</view>
								<!-- <view class="pay_btn" @click="openPayPopup(item)">充值</view> -->
							</view>
						</view>
					</view>
					<block v-else>
						<EmptyBox text="暂无数据"></EmptyBox>
					</block>
				</scroll-view>
			</view>
			<BtmLogo></BtmLogo>

			<uni-popup ref="PopupBox" type="center">
				<view class="popup_body">
					<view class="popup_title">
						会员充值
						<view class="popup_icon" @click="closePayPopup()">
							<uni-icons type="closeempty" size="18" color="#242424"></uni-icons>
						</view>
					</view>
					<view class="popup_main">
						<view class="popup_cell" :class="tabIndex == index ? 'popup_active' : ''" v-for="(item, index) in vipList" :key="index" @click="chooseThali(index)">
							<view class="shop_title">{{item.UserType}}</view>
							<view class="shop_info">
								赠送积分{{item.PValue}}
							</view>
							<view class="shop_price">¥{{item.Fee}}</view>
						</view>
					</view>

					<view class="popup_btn" @click="payFun()">充值</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {},
			userList: [],
			amount_of_money: 0,
			screenHeight: '',
			tabIndex:-1,
			vipList:[],
			checkPerson:null,
			
			myInfo:null
		};
	},
	onLoad(e) {
		this.ID = e.id
		this.GetProjectBonus()
	},
	methods: {
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$util.unixDatetime(timestamp, 'yy-ss');
		},
		async GetProjectBonus(){
			let res = await  this.$api.post('/SaleChannel/GetProjectBonus',{
				ID:this.ID
			})
			if(res.code==0){
				this.userList = res.data || []
			}else{
				this.$pv.msg(res.message)
			}
		},
		
		
	},
};
</script>

<style lang="scss">
.page {
	background-color: rgba(246, 246, 246, 1);
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	.box {
		background: linear-gradient(to bottom, #ff9918, #ff4d0d);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 100%;
		.group_1 {
			// background: url(https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721791717045650.png) 100% no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			padding: 160rpx 310rpx 78rpx 312rpx;
			.group_2 {
				width: 128rpx;
				height: 128rpx;
				> image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;
				z-index: 10;
				border-radius: 50%;
				overflow: hidden;
				background-color: white;
				padding: 6rpx;
			}
			.group_3 {
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16rpx;
				position: absolute;
				left: 24rpx;
				top: 224rpx;
				width: 702rpx;
				height: 440rpx;
				display: flex;
				flex-direction: column;
				padding: 80rpx 60rpx 34rpx 60rpx;
				box-sizing: border-box;
				.text_3 {
					overflow-wrap: break-word;
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-family: PingFang-SC-Bold;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
					line-height: 44rpx;
					align-self: center;
				}
				.section_1 {
					width: 100%;
					align-self: center;
					margin-top: 48rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					.text-group_1 {
						display: flex;
						flex-direction: column;
						align-items: center;
						.text_4 {
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 48rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 66rpx;
						}
						.text_5 {
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Medium;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.image_3 {
						width: 2rpx;
						height: 86rpx;
						margin: 12rpx 0 8rpx 0;
						background: #e4e4e4;
					}
				}
				.section_2 {
					width: 582rpx;
					margin-top: 48rpx;
					flex-direction: row;
					display: flex;
					justify-content: space-between;
					.text-wrapper_2 {
						border-radius: 40rpx;
						border: 1px solid #5d8bf8;
						display: flex;
						flex-direction: column;
						padding: 18rpx 52rpx 18rpx 52rpx;
						.text_8 {
							overflow-wrap: break-word;
							color: #5d8bf8;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.app_text-wrapper_2 {
						margin: 0 auto;
						border-radius: 40rpx;
						border: 1px solid rgba#5d8bf8;
						display: flex;
						flex-direction: column;
						padding: 18rpx 52rpx 18rpx 52rpx;
						.text_8 {
							overflow-wrap: break-word;
							color: #5d8bf8;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
						}
					}
					.text-wrapper_3 {
						background-color: #5d8bf8;
						border-radius: 40rpx;
						display: flex;
						flex-direction: column;
						padding: 20rpx 68rpx 20rpx 68rpx;
						.text_9 {
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: normal;
							text-align: right;
							white-space: nowrap;
							line-height: 40rpx;
							&::after {
								border: none;
							}
						}
					}
				}
			}
		}
		.group_4 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			align-self: center;
			// margin-top: 320rpx;
			margin: 24rpx auto;
			width: 702rpx;
			display: flex;
			flex-direction: column;
			padding: 16rpx 24rpx 32rpx 24rpx;
			box-sizing: border-box;
			.text-group_2 {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				.text_tem {
					overflow-wrap: break-word;
					font-family: PingFang-SC-Bold;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
				}
				.text_10 {
					color: rgba#5d8bf8;
					font-size: 48rpx;
					letter-spacing: 3rpx;
					margin: 0 10rpx;
				}
				.text_11 {
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
				.text_12 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					letter-spacing: 2rpx;
				}
			}
			scroll-view {
				// max-height: 27vh;
			}
			.block_2 {
				width: 654rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.person_cell {
					display: flex;
					align-items: center;
					.label_wh {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 18rpx;
					}
					.person_info {
						.image-text_2 {
							// width: 90%;
							flex: 1;
							flex-direction: row;
							display: flex;
							// justify-content: space-between;
							align-items: center;

							.name_box {
								display: flex;
								align-items: center;
								.text-group_3 {
									max-width: 250rpx;
									overflow: hidden; /*超出部分隐藏*/
									white-space: nowrap; /*禁止换行*/
									text-overflow: ellipsis; /*省略号*/

									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 28rpx;
									letter-spacing: 2rpx;
									font-family: PingFang-SC-Bold;
									font-weight: normal;
									white-space: nowrap;
									line-height: 40rpx;
								}
								.Tag {
									width: fit-content;
									height: 44rpx;
									padding: 0 12rpx;
									background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
									border-radius: 24rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									color: #ff5a0f;
									margin-left: 12rpx;
								}
							}
						}
						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.pay_cell {
					margin-left: 12rpx;
					display: flex;
					align-items: center;
					.pay_text{
						font-size: 28rpx;
						color: #5d8bf8;
					}
					.pay_btn {
						background-color: #5d8bf8;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #fff;
						padding: 8rpx 14rpx;
					}
				}

				.text_15 {
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Medium;
					font-weight: normal;
					text-align: right;
					white-space: nowrap;
					line-height: 34rpx;
					margin-top: 22rpx;
				}
			}
			.block_2:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.popup_body {
	width: 80vw;
	border-radius: 16rpx;
	background-color: #f6f6f6;
	box-sizing: border-box;
	padding: 24rpx 32rpx;
	position: relative;
	.popup_title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #111;
		margin-bottom: 14rpx;
		.popup_icon {
			position: absolute;
			top: 0;
			right: 0;
			padding: 12rpx;
		}
	}
	.popup_main {
		.popup_cell {
			border-radius: 16rpx;
			background: linear-gradient(134deg, #fef9ef 0%, #fff4e3 100%);
			border: 4rpx solid #ffe4c3;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.shop_title {
				font-size: 28rpx;
				color: #111;
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			.shop_info {
				font-size: 26rpx;
				color: #c2875b;
			}
			.shop_price {
				color: #ff4d0d;
				font-size: 32rpx;
				margin-top: 12rpx;
			}
		}
		.popup_active {
			background: linear-gradient(134deg, #fff6f6 0%, #ffe7e7 100%);
			border: 4rpx solid #ff7f7e;
		}
	}
	.popup_btn {
		background-color: #5d8bf8;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		width: 250rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 32rpx auto 0;
	}
}
</style>
